<template>
    <div id="login">
        <div class="conbox">
            <div class="leftbox flex-center" id="logindiv">
                <div class="logobox">
                    <el-image class="logo" :src="proxy.$util.getAssetsFile('imgs/logo.png')" fit="cover" />
                </div>
                <el-form ref="form" :model="obj.data" label-position="top" class="form">
                    <el-form-item prop="uname" label="账户名" class="formitem" :rules="[formRulesMixin.notNull]">
                        <el-input v-model="obj.data.uname" :prefix-icon="Avatar" placeholder="请输入登录名" class="input" size="large" clearable />
                    </el-form-item>
                    <el-form-item prop="pass" label="密码" class="formitem" :rules="[formRulesMixin.notNull]">
                        <el-input v-model="obj.data.pass" :prefix-icon="Lock" placeholder="请输入密码" class="input" size="large" show-password clearable autocomplete="new-password" />
                    </el-form-item>
                    <el-form-item prop="vcode" label="验证码" class="formitem" :rules="[formRulesMixin.notNull]">
                        <div class="vcodeinner">
                            <el-input v-model="obj.data.vcode" :prefix-icon="Discount" placeholder="请输入验证码" class="input mr5" style="flex:1;" size="large" clearable />
                            <img @click="getVcode" :src="obj.img" v-show="obj.img" />
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" class="btn" :loading="false" @click.prevent="toLogin" native-type="submit">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
       
    </div>
</template>

<script setup>
    import { reactive, getCurrentInstance, onMounted } from 'vue'
    import { Avatar, Lock, Discount } from '@element-plus/icons-vue'
    let { proxy } = getCurrentInstance()
    let obj = reactive({
        data:{
            uname: "",
            pass: "",
            vcode: "",
            vkey: ""
        },
        img: null,
    })

    onMounted(()=>{
        getVcode()
    })

    let getVcode = () => {
        proxy.$ajax({
            url: 'manager/VerifyCode',
            data: {},
            bfLoading: true
        }).then(res => {
            if(res.success){
                obj.img = "data:image/png;base64,"+res.msg.img;
                obj.data.vkey = res.msg.key;
            }else{
                proxy.elMessageMixin(res.err, 'error')
            }
        }).catch(() => {})
    }

    let toLogin = () => {
        proxy.$refs['form'].validate(valid => {
            if (valid) {
                proxy.$ajax({
                    url: 'manager/login',
                    data: obj.data,
                    bfLoading: true
                }).then(res => {
                    if(res.success){
                        sessionStorage.setItem("token", res.msg.token)
                        localStorage.setItem("uname", obj.data.uname)
                        proxy.$useStore().setUser({...res.msg,...obj.data})
                        proxy.routerPushMixin('main')
                    }else{
                        proxy.elMessageMixin(res.err, 'error')
                    }
                }).catch(() => {})
            } else {
                return false
            }
        })
    }
</script>

<style scoped lang="scss">
    @import "@/assets/login.scss";
</style>